
import React, {Component} from 'react';
import { StyleSheet, Text, View, Image, TouchableHighlight, FlatList, ScrollView} from 'react-native';
import Header from '../../../component/header/header'
// import { px2dp } from '../../../utils/util'
import api from '../../../common/net/api'
import server from '../../../common/net/server'
import PropTypes from 'prop-types'
import { px2dp } from '../../../utils/util';

let PSGE = 50
/**
 * 页面公用头部
 */
export default class TxffcDetails extends Component{
  static propTypes = {
  }
  
  constructor (props) {
    super(props)
    /**
     * state(当前组件的默认参数，类似vue的data里面的默认参数)
     */
    this.state = {
      list: [],
      page: 1,
      page_size: PSGE,
      total_count: 0,
      refreshing: false
    }
  }

  componentDidMount () {
    this._getList()
  }

  /**
   * 获取数据
   */
  _getList () {
    let state = this.state
    let par = {
      cp_key: 'txffc',
      page: state.page,
      page_size: state.page_size
    }
    let list = this.state.list
    server.post(api.txffc.getPrizeList, par).then(res =>{
      this.setState({
        list: list.concat(res.data.datas),
        total_count: parseInt(res.data.total_count)
      })
    }).catch(err => {})
  }

  _renderItem (row) {
    let list = row.prize_number.split(',')
    return(
      <View style={{padding: px2dp(20)}}>
        <View style={{flexDirection: 'row'}}>
          <Text style={{flex: 1, fontSize: px2dp(20)}}>第{row.cp_which_number.split('-')[1]}期</Text>
          <Text style={{fontSize: px2dp(20)}}>{row.open_time}</Text>
        </View>
        <View style={{flexDirection: 'row', marginTop: px2dp(20)}}>
          <View style={{flex: 1}}>
            <FlatList 
              data={list}
              horizontal={true}
              renderItem={({item}) => {
                return (<Text style={{marginRight: px2dp(20), color: 'white', backgroundColor: 'red', borderRadius: px2dp(40), width: px2dp(40), height: px2dp(40), textAlign: 'center', lineHeight: px2dp(40)}}>{item}</Text>)
              }}>
            </FlatList>
          </View>
          <Text>{this._chart_format(row.prize_number)}</Text>
        </View>
      </View>
    )
  }

  _chart_format(value) {
    value = value.split(',')
    let _qian=parseInt(value[0]);
    let _ge=parseInt(value[4]);
    if(_qian==_ge){
        return '和';
    }else if(_qian>_ge){
        return '龙';
    }else{
        return '虎';
    }
  }

  _onEndReached () {
    let page = this.state.page
    let total_count = this.state.total_count
    let pageSize = this.state.page_size
    if (page <= Math.ceil(total_count/pageSize)) {
      this.setState({
        page: page + 1
      }, () => {
        this._getList()
      })
    } else {
      return
    }
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <Header text='腾讯分分彩开奖历史' goBack={() => {this.props.navigation.goBack()}}></Header>
        <View style={{flex: 1}}>
          <FlatList
            data={this.state.list}
            numColumns = {1}
            ItemSeparatorComponent={() => <View style={{backgroundColor: '#eee',height: 1, marginHorizontal: px2dp(20)}}></View>} 
            onRefresh = {() => {
              this.setState({
                list: [],
                page: 1,
                page_size: PSGE,
                total_count: 0,
              }, () => {
                this._getList()
              })
            }}
            onEndReached={() => {this._onEndReached()}}
            onEndReachedThreshold={0.001}
            ListFooterComponent={() => {
              return (<Text style={{textAlign: 'center'}}>加载更多</Text>)
            }}
            refreshing={this.state.refreshing}
            renderItem={({item}) => this._renderItem(item)}>
          </FlatList>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({});